/**
 * Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
 * All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are NOT permitted except as agreed by
 * iAuto (Shanghai) Co., Ltd.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 */
import React, { useState } from 'react';
import { Form, Select, Divider, FormInstance } from 'antd';
import styles from './index.less';

const { Option } = Select;
const { Item } = Form;

export const TextTitle: React.FC<{ text:string }> = ({ text }) => (
  <>请选择要<span style={{ color: 'red' }}>{text}</span>的车系车型</>
);

const CarModel: React.FC<{
  form: FormInstance<any>;
  seriesModelList: any;
  children?: React.ReactNode;
}> = ({ form, seriesModelList, children }) => {
  const [options, setOptions] = useState([]);

  const allSelected = () => {
    form.setFieldsValue({
      carModels: options.map((item: any) => item.code),
    });
  };

  const clearAll = () => {
    form.setFieldsValue({
      carModels: [],
    });
  };

  const handleProvinceChange = (value: any) => {
    form.setFieldsValue({
      carSeries: [value],
    });
    for (const obj of seriesModelList?.data?.data || []) {
      if (value === obj?.code) {
        setOptions(obj.children);
      }
    }
  };

  return (
    <Form form={form} colon={true} labelCol={{ span: 4 }} style={{ width: '100%' }}>
      <Item
        label="车系"
        name="carSeries"
        rules={[
          {
            required: true,
            message: '车系信息为必填内容，请选择！',
          },
        ]}
      >
        <Select placeholder={'请选择车系'} onChange={handleProvinceChange}>
          {seriesModelList?.data?.data?.map?.((obj: any) => (
            <Option value={obj.code} key={obj.code}>
              {obj.name}
            </Option>
          ))}
        </Select>
      </Item>

      <Item
        label="车型"
        name="carModels"
        rules={[
          {
            required: true,
            message: '车型信息为必填内容，请选择！',
          },
        ]}
      >
        <Select
          mode="multiple"
          showArrow
          placeholder={'请选择车型'}
          dropdownRender={(menu) => (
            <>
              {menu}
              <Divider style={{ margin: '8px 0' }} />
              <div className={styles.extraBtn}>
                <div className={styles.extraBtnItem} onClick={allSelected}>
                  全部选择
                </div>
                <div className={styles.extraBtnItem} onClick={clearAll}>
                  全部取消
                </div>
              </div>
            </>
          )}
        >
          {options.map?.((obj: any) => (
            <Option value={obj.code} key={obj.code}>
              {obj.name}
            </Option>
          ))}
        </Select>
      </Item>
      {children}
    </Form>
  );
};

export default CarModel;
